<template>
    <div class="content-wrapper-view">
        <panel-group @handleSetLineChartData="handleSetLineChartData" />

        <line-chart :selectChartData="selectChartData"></line-chart>

        <el-row :gutter="30">
            <el-col :xs="24" :sm="24" :lg="8">
                <div class="chart-wrapper">
                    <radar-chart/>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8">
                <div class="chart-wrapper">
                    <pie-chart/>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8">
                <div class="chart-wrapper">
                    <bar-chart/>
                </div>
            </el-col>
        </el-row>

        <el-row :gutter="8">
            <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
                <transaction-table/>
            </el-col>
            <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">

            </el-col>
            <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">

            </el-col>
        </el-row>
        <back-to-top :scrollContainerClass="scrollContainerClass" />
    </div>
</template>

<script>
import PanelGroup from "./components/PanelGroup";
import LineChart from "./components/LineChart";
import RadarChart from "./components/RadarChart";
import PieChart from "./components/PieChart";
import BarChart from "./components/BarChart";
import TransactionTable from "./components/TransactionTable";
import BackToTop from "@/components/BackToTop";

export default {
    name: "Dashboard",
    components: {
        PanelGroup,
        LineChart,
        RadarChart,
        PieChart,
        BarChart,
        TransactionTable,
        BackToTop
    },
    data() {
        return {
            selectChartData: "newVisitis",
            scrollContainerClass: "content-wrapper"
        };
    },
    methods: {
        handleSetLineChartData(type) {
            this.selectChartData = type;
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
}
</style>